<template>
  <div class="leads">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>线索管理</span>
          <el-button type="primary" @click="handleAdd">添加线索</el-button>
        </div>
      </template>

      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="来源">
          <el-select v-model="searchForm.source" placeholder="请选择来源">
            <el-option label="抖音" value="抖音" />
            <el-option label="视频号" value="视频号" />
            <el-option label="快手" value="快手" />
            <el-option label="直播" value="直播" />
            <el-option label="小红书" value="小红书" />
          </el-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="searchForm.account" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="searchForm.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="待分发" value="待分发" />
            <el-option label="已分发" value="已分发" />
            <el-option label="已认领" value="已认领" />
            <el-option label="已跟进" value="已跟进" />
            <el-option label="已成交" value="已成交" />
            <el-option label="已流失" value="已流失" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="leadsList" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="source" label="来源" width="100">
          <template #default="{ row }">
            <el-tag :type="getSourceType(row.source)">
              {{ row.source }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号" width="120" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="wechat" label="微信号" width="120" />
        <el-table-column prop="type" label="咨询类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">
              {{ row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="carType" label="考虑车型" width="120" />
        <el-table-column prop="sales" label="分配销售" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="primary" link @click="handleViewDetails(row)">详情</el-button>
            <el-button type="primary" link @click="handleViewFlow(row)">跟进记录</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑线索对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="来源" prop="source">
          <el-select v-model="form.source" placeholder="请选择来源">
            <el-option label="抖音" value="抖音" />
            <el-option label="视频号" value="视频号" />
            <el-option label="快手" value="快手" />
            <el-option label="直播" value="直播" />
            <el-option label="小红书" value="小红书" />
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input v-model="form.wechat" placeholder="请输入微信号" />
        </el-form-item>
        <el-form-item label="咨询类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择咨询类型">
            <el-option label="租车" value="租车" />
            <el-option label="买车" value="买车" />
            <el-option label="二手车" value="二手车" />
          </el-select>
        </el-form-item>
        <el-form-item label="考虑车型" prop="carType">
          <el-input v-model="form.carType" placeholder="请输入考虑车型" />
        </el-form-item>
        <el-form-item label="分配销售" prop="sales">
          <el-select v-model="form.sales" placeholder="请选择销售">
            <el-option label="张三" value="张三" />
            <el-option label="李四" value="李四" />
            <el-option label="王五" value="王五" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="待分发" value="待分发" />
            <el-option label="已分发" value="已分发" />
            <el-option label="已认领" value="已认领" />
            <el-option label="已跟进" value="已跟进" />
            <el-option label="已成交" value="已成交" />
            <el-option label="已流失" value="已流失" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 线索详情对话框 -->
    <el-dialog
      title="线索详情"
      v-model="detailsDialogVisible"
      width="800px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="来源">{{ currentLead.source }}</el-descriptions-item>
        <el-descriptions-item label="账号">{{ currentLead.account }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ currentLead.phone }}</el-descriptions-item>
        <el-descriptions-item label="微信号">{{ currentLead.wechat }}</el-descriptions-item>
        <el-descriptions-item label="咨询类型">{{ currentLead.type }}</el-descriptions-item>
        <el-descriptions-item label="考虑车型">{{ currentLead.carType }}</el-descriptions-item>
        <el-descriptions-item label="分配销售">{{ currentLead.sales }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ currentLead.status }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentLead.createTime }}</el-descriptions-item>
        <el-descriptions-item label="分发时间">{{ currentLead.distributeTime }}</el-descriptions-item>
        <el-descriptions-item label="认领时间">{{ currentLead.claimTime }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentLead.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 跟进记录对话框 -->
    <el-dialog
      title="跟进记录"
      v-model="flowDialogVisible"
      width="800px"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
          :type="activity.type"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const searchForm = reactive({
  source: '',
  account: '',
  phone: '',
  status: ''
})

const leadsList = ref([
  {
    id: 1,
    source: '抖音',
    account: 'douyin123',
    phone: '138****1234',
    wechat: 'wx123456',
    type: '租车',
    carType: '面包车',
    sales: '张三',
    status: '待分发',
    createTime: '2024-03-20 14:30:00',
    distributeTime: '',
    claimTime: '',
    remark: '客户对面包车比较感兴趣'
  },
  {
    id: 2,
    source: '视频号',
    account: 'video456',
    phone: '139****5678',
    wechat: 'wx234567',
    type: '买车',
    carType: '箱货',
    sales: '李四',
    status: '已认领',
    createTime: '2024-03-20 15:20:00',
    distributeTime: '2024-03-20 15:30:00',
    claimTime: '2024-03-20 16:00:00',
    remark: '客户需要箱货用于物流运输'
  }
])

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const dialogVisible = ref(false)
const dialogTitle = ref('添加线索')
const detailsDialogVisible = ref(false)
const flowDialogVisible = ref(false)
const currentLead = ref({})
const formRef = ref(null)

const form = reactive({
  source: '',
  account: '',
  phone: '',
  wechat: '',
  type: '',
  carType: '',
  sales: '',
  status: '待分发',
  remark: ''
})

const rules = {
  source: [{ required: true, message: '请选择来源', trigger: 'change' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  wechat: [{ required: true, message: '请输入微信号', trigger: 'blur' }],
  type: [{ required: true, message: '请选择咨询类型', trigger: 'change' }],
  carType: [{ required: true, message: '请输入考虑车型', trigger: 'blur' }],
  sales: [{ required: true, message: '请选择销售', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const activities = ref([
  {
    content: '线索创建',
    timestamp: '2024-03-20 14:30',
    type: 'primary'
  },
  {
    content: '线索分发',
    timestamp: '2024-03-20 15:30',
    type: 'success'
  },
  {
    content: '销售认领',
    timestamp: '2024-03-20 16:00',
    type: 'warning'
  },
  {
    content: '首次跟进',
    timestamp: '2024-03-20 16:30',
    type: 'info'
  }
])

const getSourceType = (source) => {
  const types = {
    '抖音': 'danger',
    '视频号': 'success',
    '快手': 'warning',
    '直播': 'info',
    '小红书': 'primary'
  }
  return types[source] || 'info'
}

const getTypeTag = (type) => {
  const types = {
    '租车': 'success',
    '买车': 'primary',
    '二手车': 'warning'
  }
  return types[type] || 'info'
}

const getStatusType = (status) => {
  const types = {
    '待分发': 'info',
    '已分发': 'warning',
    '已认领': 'primary',
    '已跟进': 'success',
    '已成交': 'success',
    '已流失': 'danger'
  }
  return types[status] || 'info'
}

const handleSearch = () => {
  // 实现搜索逻辑
  console.log('搜索条件：', searchForm)
}

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
}

const handleAdd = () => {
  dialogTitle.value = '添加线索'
  dialogVisible.value = true
  Object.keys(form).forEach(key => {
    form[key] = key === 'status' ? '待分发' : ''
  })
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑线索'
  dialogVisible.value = true
  Object.assign(form, row)
}

const handleViewDetails = (row) => {
  currentLead.value = row
  detailsDialogVisible.value = true
}

const handleViewFlow = (row) => {
  flowDialogVisible.value = true
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 实现提交逻辑
      ElMessage.success('保存成功')
      dialogVisible.value = false
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 实现分页逻辑
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 实现分页逻辑
}
</script>

<style scoped>
.leads {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 